<template>
  <el-drawer
    :visible.sync="visible"
    direction="rtl"
    size="40%"
    :close-on-press-escape="false"
    :wrapper-closable="false"
    :show-close="false"
  >
    <template v-slot:title>
      <div class="drawer-header">
        <span>详情</span>
        <div>
          <el-button icon="el-icon-close" @click="visible = false">
            取消
          </el-button>
        </div>
      </div>
    </template>
    <el-descriptions class="margin-top" :column="2" size="medium" border>
      <el-descriptions-item label="上级组织">
        {{ orgNames }}
      </el-descriptions-item>
      <el-descriptions-item label="组织名称">
        {{ formData.orgName }}
      </el-descriptions-item>
      <el-descriptions-item label="组织编码">
        {{ formData.orgId }}
      </el-descriptions-item>
      <el-descriptions-item label="组织类型">
        {{ formData.orgType === 'dept' ? '部门' : '机构' }}
      </el-descriptions-item>
      <el-descriptions-item label="组织层级">
        {{ levelNames }}
      </el-descriptions-item>
      <el-descriptions-item label="办公电话">
        {{ formData.phone }}
      </el-descriptions-item>
      <el-descriptions-item label="机构路径" span="3">
        {{ formData.orgPath }}
      </el-descriptions-item>
      <el-descriptions-item label="所在地址" span="3">
        {{ formData.orgAddress }}
      </el-descriptions-item>
      <el-descriptions-item label="使用状态">
        {{ formData.status === 'Y' ? '启用' : '禁用' }}
      </el-descriptions-item>
      <el-descriptions-item label="备注" span="3">
        {{ formData.remark }}
      </el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>

<script>
import { convertDict, convertTreeData } from '@/utils'
import { getAllOrgList } from './api'

export default {
  name: 'OrgInfoDetail',
  components: { },
  directives: { },
  filters: {},
  props: {
    detail: {
      type: Object,
      require: true,
      default: undefined
    }
  },
  data() {
    return {
      // 状态字典
      statusOptions: [{ code: 'Y', text: '启用' }, { code: 'N', text: '禁用' }],
      orgLevelOptions: [{ code: '01', text: '一级组织' }, { code: '02', text: '二级组织' }, { code: '03', text: '三级组织' }],
      // 是否显示弹出层
      visible: false,
      // 表单数据对象
      formData: {},
      orgOptions: []
    }
  },
  computed: {
    levelNames: function() {
      if (this.formData.orgLevel) {
        return convertDict(this.formData.orgLevel, this.orgLevelOptions)
      }
      return ''
    },
    orgNames: function() {
      if (this.formData.parentId) {
        return convertTreeData(this.formData.parentId, this.orgOptions)
      }
      return ''
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    init() {
      this.visible = this.detail.visible
      this.formData = this.detail.data
      getAllOrgList().then(res => {
        this.orgOptions = res.data
      })
    },
    // 关闭弹出层
    handleClose() {
      this.visible = false
    }
  }
}
</script>
